<template>
	<view>
		<view v-if='isApplying' class="p-5">
			<view class=" bg-white flex flex-center flex-column p-4">
				<image src="../../static/icon/wait.png" class="wait"></image>
				<view class="text-dark-dark-2 h9 w-60 mb-6">您的申请已受理，正在进行信息核验，请耐心等待...</view>
				<view class="text-1 h9" @click="$page.switch('/pages/index/index')">去首页逛逛..</view>
			</view>
		</view>
		<view class="bg p-4" v-else
			:style="'background-image: url('+WEBCONFIG.bg3+');'">
			<view class="box-shadow rounded-3 bg-white p-3 mt-10">
				<view class="h7 mb-3 text-dark">填写申请信息</view>
				<view class="line"></view>
				<view class="p-4">
					<view class="flex rounded-2 flex-row flex-y-center mb-3 p-2 bg-1">
						<view class="w-25 text-dark-light-1">邀请人</view>
						<input :value="USERINFO.referee_name + '(请核对)'" disabled />
					</view>
					<view class="flex rounded-2 flex-row flex-y-center mb-3 p-2 bg-1">
						<view class="w-25 text-dark-light-1">姓名</view>
						<input placeholder="请输入真实姓名" v-model="form.name" />
					</view>
					<view class="flex rounded-2 flex-row flex-y-center mb-3 p-2 bg-1">
						<view class="w-25 text-dark-light-1">手机号</view>
						<input placeholder="请输入手机号" maxlength="11" type="tel" v-model="form.mobile" />
					</view>
					<view class="text-dark-light-4 h9 flex flex-row flex-y-center">
						<radio-group @change="changeActive">
							<radio value="2" style="transform: scale(0.7);" color='#0476eb'></radio>
						</radio-group>
						我已阅读并了解<span class="text-1" @click="$page.open('/pages/article/index?name=agreement')">【分销商申请协议】</span>
					</view>
				</view>
				<view class="text-white btn p-2 w-45 flex flex-center h9" @click="apply">申请成为分销商</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { $http, $page } from '@/utils'
	import { onLoad } from '@dcloudio/uni-app'
	import {  useRefs, useUserStore,useWebConfigStore } from "@/stores";
	//站点信息
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	const userStore = useUserStore()
	const { USERINFO } = useRefs(userStore);
	const active = ref("1")
	const form = ref({
		"name": '',
		"mobile": ""
	})
	const isApplying = ref(false)
	//获取分销状态
	onLoad(() => {
		uni.showLoading({
			title:'加载中...',
			mask:true
		})
		$http.get('Dealer/getDetail').then(res => {
			let data = res.data
			uni.hideLoading()
			if (data.apply_status == "1") {
				isApplying.value = true
			}
		})
	})

	//选中
	const changeActive = ((e : any) => {
		active.value = "2"
	})
	//申请
	const apply = (() => {
		if (form.value.name == '' || form.value.mobile == "") {
			uni.showToast({
				title: '请填写完整数据',
				icon: 'none'
			})
			return;
		}
		if (active.value == "1") {
			uni.showModal({
				title: '温馨提示',
				content: '请先阅读勾选分销商申请协议',
				showCancel: false
			})
			return;
		}
		$http.post('Dealer/apply', { data: form.value }).then(res => {
                uni.showToast({
                	title:'成功',
					icon:'none'
                })
				setTimeout(()=>{
				      uni.navigateBack()
				},600)
		})
	})
</script>

<style>
	.wait {
		width: 150rpx;
		height: 150rpx;
	}

	.bg {
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.line {
		background-color: #cecece;
		width: 100%;
		height: 1px;
	}

	.bg-1 {
		background-color: #f9f9f9;
	}

	.text-1 {
		color: #0476eb;
	}

	.btn {
		background-color: #0476eb;
		border-radius: 50rpx;
		margin: 0 auto;
	}
</style>